<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub风格任务看板</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --github-white: #ffffff;
            --github-border: #e1e4e8;
            --github-bg: #f6f8fa;
            --github-text: #24292e;
            --github-blue: #0366d6;
            --github-green: #28a745;
            --github-purple: #6f42c1;
            --github-red: #d73a49;
            --github-gray: #6a737d;
            --column-width: 320px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        body {
            background-color: var(--github-bg);
            color: var(--github-text);
            line-height: 1.5;
            padding: 16px;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
            background-color: var(--github-white);
            border: 1px solid var(--github-border);
            border-radius: 6px;
            margin-bottom: 24px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .logo h1 {
            font-size: 20px;
            font-weight: 600;
        }

        .logo img {
            width: 32px;
            height: 32px;
        }

        .search-box {
            display: flex;
            align-items: center;
            background: var(--github-bg);
            border: 1px solid var(--github-border);
            border-radius: 6px;
            padding: 6px 12px;
            width: 300px;
        }

        .search-box input {
            background: transparent;
            border: none;
            outline: none;
            width: 100%;
            color: var(--github-text);
            font-size: 14px;
        }

        .search-box i {
            color: var(--github-gray);
            margin-right: 8px;
        }

        .user-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .user-actions img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }

        .container {
            display: flex;
            gap: 24px;
            overflow-x: auto;
            padding-bottom: 24px;
        }

        .column {
            flex: 0 0 var(--column-width);
            background-color: var(--github-white);
            border: 1px solid var(--github-border);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            max-height: 80vh;
        }

        .column-header {
            padding: 16px;
            border-bottom: 1px solid var(--github-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .column-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
        }

        .count {
            background: var(--github-bg);
            color: var(--github-gray);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }

        .column-actions {
            color: var(--github-gray);
        }

        .tasks {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
        }

        .task {
            background-color: var(--github-white);
            border: 1px solid var(--github-border);
            border-radius: 6px;
            padding: 12px 16px;
            margin-bottom: 8px;
            cursor: move;
            transition: all 0.2s;
        }

        .task:hover {
            border-color: #c0c0c0;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        }

        .task-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .task-title {
            font-weight: 600;
            font-size: 14px;
        }

        .task-labels {
            display: flex;
            gap: 4px;
            margin: 8px 0;
        }

        .label {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .label-bug {
            background-color: #d73a4a1a;
            color: #cb2431;
        }

        .label-feature {
            background-color: #0fdb581a;
            color: #0cb466;
        }

        .label-enhancement {
            background-color: #0366d61a;
            color: #0366d6;
        }

        .label-documentation {
            background-color: #6f42c11a;
            color: #6f42c1;
        }

        .task-meta {
            display: flex;
            justify-content: space-between;
            color: var(--github-gray);
            font-size: 12px;
            margin-top: 8px;
        }

        .task-assignee {
            display: flex;
            align-items: center;
        }

        .task-assignee img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 4px;
        }

        .add-task {
            padding: 12px 16px;
            color: var(--github-gray);
            border-top: 1px solid var(--github-border);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

        .add-task:hover {
            color: var(--github-blue);
        }

        /* 拖放样式 */
        .dragging {
            opacity: 0.5;
            transform: rotate(5deg);
        }

        .drag-over {
            background-color: #f0f7ff;
            border: 2px dashed var(--github-blue);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                gap: 16px;
                padding: 16px;
            }

            .search-box {
                width: 100%;
            }

            .container {
                flex-direction: column;
                align-items: center;
            }

            .column {
                width: 100%;
                max-width: var(--column-width);
            }
        }
    </style>
</head>

<body>
    <header>
        <div class="logo">
            <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub Logo">
            <h1>GitHub任务看板</h1>
        </div>
        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索任务...">
        </div>
        <div class="user-actions">
            <i class="far fa-bell"></i>
            <i class="fas fa-plus"></i>
            <img src="https://avatars.githubusercontent.com/u/1?v=4" alt="用户头像">
        </div>
    </header>

    <div class="container">
        <!-- 待处理列 -->
        <div class="column" id="todo-column">
            <div class="column-header">
                <div class="column-title">
                    <i class="fas fa-circle" style="color: #d73a49;"></i>
                    <span>待处理</span>
                    <span class="count">3</span>
                </div>
                <div class="column-actions">
                    <i class="fas fa-ellipsis-h"></i>
                </div>
            </div>
            <div class="tasks">
                <div class="task" draggable="true">
                    <div class="task-header">
                        <div class="task-title">修复登录页面样式问题</div>
                        <i class="far fa-comment"> 2</i>
                    </div>
                    <div class="task-labels">
                        <span class="label label-bug">bug</span>
                    </div>
                    <div class="task-meta">
                        <div>#101</div>
                        <div class="task-assignee">
                            <img src="https://avatars.githubusercontent.com/u/2?v=4" alt="Assignee">
                            userA
                        </div>
                    </div>
                </div>
                <div class="task" draggable="true">
                    <div class="task-header">
                        <div class="task-title">优化数据库查询性能</div>
                        <i class="far fa-comment"> 5</i>
                    </div>
                    <div class="task-labels">
                        <span class="label label-enhancement">enhancement</span>
                    </div>
                    <div class="task-meta">
                        <div>#102</div>
                        <div class="task-assignee">
                            <img src="https://avatars.githubusercontent.com/u/3?v=4" alt="Assignee">
                            userB
                        </div>
                    </div>
                </div>
            </div>
            <div class="add-task">
                <i class="fas fa-plus"></i>
                <span>添加任务</span>
            </div>
        </div>

        <!-- 进行中列 -->
        <div class="column" id="inprogress-column">
            <div class="column-header">
                <div class="column-title">
                    <i class="fas fa-circle" style="color: #fb8532;"></i>
                    <span>进行中</span>
                    <span class="count">2</span>
                </div>
                <div class="column-actions">
                    <i class="fas fa-ellipsis-h"></i>
                </div>
            </div>
            <div class="tasks">
                <div class="task" draggable="true">
                    <div class="task-header">
                        <div class="task-title">实现用户个人资料页面</div>
                        <i class="far fa-comment"> 7</i>
                    </div>
                    <div class="task-labels">
                        <span class="label label-feature">feature</span>
                    </div>
                    <div class="task-meta">
                        <div>#103</div>
                        <div class="task-assignee">
                            <img src="https://avatars.githubusercontent.com/u/4?v=4" alt="Assignee">
                            userC
                        </div>
                    </div>
                </div>
            </div>
            <div class="add-task">
                <i class="fas fa-plus"></i>
                <span>添加任务</span>
            </div>
        </div>

        <!-- 审核中列 -->
        <div class="column" id="review-column">
            <div class="column-header">
                <div class="column-title">
                    <i class="fas fa-circle" style="color: #6f42c1;"></i>
                    <span>审核中</span>
                    <span class="count">1</span>
                </div>
                <div class="column-actions">
                    <i class="fas fa-ellipsis-h"></i>
                </div>
            </div>
            <div class="tasks">
                <div class="task" draggable="true">
                    <div class="task-header">
                        <div class="task-title">编写API文档</div>
                        <i class="far fa-comment"> 3</i>
                    </div>
                    <div class="task-labels">
                        <span class="label label-documentation">documentation</span>
                    </div>
                    <div class="task-meta">
                        <div>#104</div>
                        <div class="task-assignee">
                            <img src="https://avatars.githubusercontent.com/u/5?v=4" alt="Assignee">
                            userD
                        </div>
                    </div>
                </div>
            </div>
            <div class="add-task">
                <i class="fas fa-plus"></i>
                <span>添加任务</span>
            </div>
        </div>

        <!-- 已完成列 -->
        <div class="column" id="done-column">
            <div class="column-header">
                <div class="column-title">
                    <i class="fas fa-circle" style="color: #28a745;"></i>
                    <span>已完成</span>
                    <span class="count">2</span>
                </div>
                <div class="column-actions">
                    <i class="fas fa-ellipsis-h"></i>
                </div>
            </div>
            <div class="tasks">
                <div class="task" draggable="true">
                    <div class="task-header">
                        <div class="task-title">设计应用图标</div>
                        <i class="far fa-comment"> 4</i>
                    </div>
                    <div class="task-labels">
                        <span class="label label-feature">feature</span>
                    </div>
                    <div class="task-meta">
                        <div>#105</div>
                        <div class="task-assignee">
                            <img src="https://avatars.githubusercontent.com/u/6?v=4" alt="Assignee">
                            userE
                        </div>
                    </div>
                </div>
                <div class="task" draggable="true">
                    <div class="task-header">
                        <div class="task-title">设置CI/CD流水线</div>
                        <i class="far fa-comment"> 6</i>
                    </div>
                    <div class="task-labels">
                        <span class="label label-enhancement">enhancement</span>
                    </div>
                    <div class="task-meta">
                        <div>#106</div>
                        <div class="task-assignee">
                            <img src="https://avatars.githubusercontent.com/u/7?v=4" alt="Assignee">
                            userF
                        </div>
                    </div>
                </div>
            </div>
            <div class="add-task">
                <i class="fas fa-plus"></i>
                <span>添加任务</span>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 获取所有任务和列
            const tasks = document.querySelectorAll('.task');
            const columns = document.querySelectorAll('.column');

            // 为每个任务添加拖拽事件
            tasks.forEach(task => {
                task.addEventListener('dragstart', () => {
                    task.classList.add('dragging');
                });

                task.addEventListener('dragend', () => {
                    task.classList.remove('dragging');
                });
            });

            // 为每个列添加拖放事件
            columns.forEach(column => {
                column.addEventListener('dragover', e => {
                    e.preventDefault();
                    const afterElement = getDragAfterElement(column, e.clientY);
                    const draggable = document.querySelector('.dragging');
                    if (afterElement == null) {
                        column.querySelector('.tasks').appendChild(draggable);
                    } else {
                        column.querySelector('.tasks').insertBefore(draggable, afterElement);
                    }
                    column.classList.add('drag-over');
                });

                column.addEventListener('dragleave', () => {
                    column.classList.remove('drag-over');
                });

                column.addEventListener('drop', () => {
                    column.classList.remove('drag-over');
                    updateTaskCounts();
                });
            });

            // 获取拖拽后的元素位置
            function getDragAfterElement(column, y) {
                const draggableElements = [...column.querySelectorAll('.task:not(.dragging)')];

                return draggableElements.reduce((closest, child) => {
                    const box = child.getBoundingClientRect();
                    const offset = y - box.top - box.height / 2;
                    if (offset < 0 && offset > closest.offset) {
                        return { offset: offset, element: child };
                    } else {
                        return closest;
                    }
                }, { offset: Number.NEGATIVE_INFINITY }).element;
            }

            // 更新任务计数
            function updateTaskCounts() {
                columns.forEach(column => {
                    const count = column.querySelectorAll('.task').length;
                    column.querySelector('.count').textContent = count;
                });
            }

            // 添加新任务功能
            document.querySelectorAll('.add-task').forEach(addButton => {
                addButton.addEventListener('click', () => {
                    const column = addButton.closest('.column');
                    const tasksContainer = column.querySelector('.tasks');

                    const newTask = document.createElement('div');
                    newTask.className = 'task';
                    newTask.draggable = true;
                    newTask.innerHTML = `
                        <div class="task-header">
                            <div class="task-title">新任务</div>
                            <i class="far fa-comment"> 0</i>
                        </div>
                        <div class="task-labels">
                            <span class="label label-feature">feature</span>
                        </div>
                        <div class="task-meta">
                            <div>#107</div>
                            <div class="task-assignee">
                                <img src="https://avatars.githubusercontent.com/u/8?v=4" alt="Assignee">
                                新成员
                            </div>
                        </div>
                    `;

                    // 添加拖拽事件
                    newTask.addEventListener('dragstart', () => {
                        newTask.classList.add('dragging');
                    });

                    newTask.addEventListener('dragend', () => {
                        newTask.classList.remove('dragging');
                    });

                    tasksContainer.appendChild(newTask);
                    updateTaskCounts();
                });
            });
        });
    </script>
</body>

</html>